<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="arr[0]">
        <h1>{{arr}}---{{obj}}</h1>
        <h2>{{ firstName }}</h2>
    </div>
    <script>
        //vue2 data的数据 通过 Object.defineProperty() 实现双向数据绑定的
        // 数组,也会get set , 数组内容是值类型(不会被get set), 内容如果是对象（get,set)
        // 重写了数组的七大方法，进一步提升对数组的操作
        //pop push reverse shift sort splice unshift--->只要调用7个方法之一，就会更新页面

        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "李",
                obj: {
                    n: {
                        a: 10
                    }
                },
                arr: [10, 20, 30, { str: "hello" }]
            },
            mounted() {//模板编译之后，数据是更新的，渲染已经完成，页面没有更新
                // 数据更新+页面更新
                //1.this.$forceUpdate() 强制更新页面
                //2.this.$set(对象/数组,key/index,value)
                // this.$set(this.arr,5,520)
                // this.$set(this.obj,"name","lili5")
                //3.数组可用--重写的7大方法
                // this.arr.push(600);

                this.firstName = "张"
                this.arr[5] = 5;
                this.obj.name = "lili";

                console.log(this.arr);
                console.log(this.obj);

                // this.$forceUpdate()
            }
        })
        // console.log(vm)

    </script>
</body>

</html>